<template>
	<view v-show="value">
		<view class="j-modal-bg" @tap="onMaskCancel"></view>
		<view class="j-modal-outer">
			<view class="j-modal-inner">
				<view class="j-modal-title" v-if="title !== ''">{{title}}</view>
				<slot name="title"></slot>
				
				<view class="j-modal-content" >
					<slot name="content"></slot>
				</view>
				<view v-if="!customButton" class="j-model-operation">
					<view class="j-modal-cancel" v-if="showCancel" @tap="onCancel">{{cancelText ? cancelText:$t('General.family.cancel')}}</view>
					<view class="j-modal-confirm" v-if="showConfirm" @tap="onOk">{{okText ?okText:$t('General.family.ok')}}</view>
				</view>
                <view class="j-model-operation" v-else>
                    <view class="j-modal-cancel" v-if="showCancel">
                        <slot name="cancelButton"></slot>
                    </view>
                    <view class="j-modal-confirm" v-if="showConfirm">
                        <slot name="okButton"></slot>
                    </view>

                </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		options: {
			// 在组件定义时的选项中启用多slot支持
		    multipleSlots: true,
			// 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
		    styleIsolation: 'apply-shared' 
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			// 显示隐藏
			value:{
				type:Boolean,
				default:false
			},
			//标题
			title:{
				type:String,
				default:''
			},
			//显示取消按钮
			showCancel:{
				type:Boolean,
				default:true
			},
			//显示确认按钮
			showConfirm:{
				type:Boolean,
				default:true
			},
			//是否允许点击遮罩层关闭
			maskCloseAble:{
				type:Boolean,
				default:true
			},
			okText:{
				type:String,
				default:''
			},
			cancelText:{
				type:String,
				default:''
			},
            // 是否是自定义按钮样式
            customButton:{
                type:Boolean,
                default:false
            }
		},
		data(){
			return {}
		},
		mounted:function(){
			
		},
		methods:{
			onMaskCancel(){
				if(this.maskCloseAble){
					this.$emit('mask')
				}
			},
			onOk(ev){
				this.$emit('ok')
			},
			onCancel(ev){
				this.$emit('cancel')
			},
		}
	}
</script>

<style>
	.j-modal-bg{
		position:fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.j-modal-outer{
		position: absolute;
		z-index: 999;
		top: 50%;
		left: 50%;
        transform: translate(-50%,-50%);
		text-align: center;
		overflow: hidden;
		background:rgba(255,255,255,1);
		border-radius: 20rpx;
		padding:40rpx;
	}
	.j-modal-inner{
		width: auto;
	}
	.j-modal-title{
		color: #464646;
		font-weight: bold;
	}
	.j-modal-content{
		width: 70vw;
		max-height: 60vh;
		overflow: auto;
		margin:60rpx 0;
		color: #9A9A9A;
	}
	.j-model-operation{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.j-modal-cancel{
		width: 100%;
		background: #F6F7FB;
		color: #000000;
		padding:16rpx 32rpx;
		border-radius: 48rpx;
		margin:0 10rpx;
	}
	.j-modal-confirm{
		width: 100%;
		background: #FF0025;
		color: #FFFFFF;
		padding:16rpx 32rpx;
		border-radius: 48rpx;
		margin:0 10rpx;
	}
</style>